<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>static Title</title>
    <head>
        <script type="text/javascript">
            if (!!window.EventSource) {
                console.log("Event source available");
                var source = new EventSource('/index/push2/123');

                source.addEventListener('message', function(e) {
                    console.log(e.data);
                    if (document.getElementById('result').innerText) {
                        document.getElementById('result').innerText = e.data
                    } else {
                        document.getElementById('result').textContent = e.data
                    }

                    // source.close(); // close connection, otherwisse browser will request the server constantly
                });

                eventSource.onmessage = function (event) {
                    document.getElementById("result").innerHTML = document.getElementById("result").innerHTML +'<br>'+event.data;
                }
                source.addEventListener('open', function(e) {
                    console.log("Connection was opened.");
                }, false);

                source.addEventListener('error', function(e) {
                    if (e.readyState == EventSource.CLOSED) {
                        console.log("Connection was closed.");
                    } else {
                        console.log(e.readyState);
                    }
                }, false);
            } else {
                console.log("No SSE available");
            }
        </script>
    </head>
</head>
<body>
<div>Execute a time consume operation....</div>
<div id="result"></div>
</body>
</html>